<!DOCTYPE html>
<html>
<head>
    <title>pontoDemo</title>

    <!-- First load Ponto -->
    <script src="web/src/ponto.js" type="text/javascript"></script>

    <script type="text/javascript">
        function sendMessage() {
            Ponto.invoke(
                    "Messaging",
                    "sendMessage",
                    {subject: "Hey! Ponto is great!", to: "example@email.domain", body: "Hey! I'm using PONTO to handle native requests from webview!"},
                    null,
                    null);
        }


        function getSomeDataFromHandler() {
            Ponto.invoke(
                    "Messaging",
                    "getSomeDataFromHandler",
                    null,
                    function (params) {
                        console.log('success with params:');
                        console.log(params);
                        alert('success');
                    },
                    function (params) {
                        console.log('error with params:');
                        console.log(params);
                        alert('error');
                    });
        }


        function testNotExistentMethodInHandler() {
            Ponto.invoke(
                    "Messaging",
                    "someFakeMethod",
                    null,
                    null,
                    function (params) {
                        console.log('error with params:');
                        console.log(params);
                        alert('Ups!');
                    });
        }


        function testNotExistentHandler() {
            Ponto.invoke(
                    "NotExistClass",
                    "NotExistMethod",
                    null,
                    function (params) {
                        alert('This is not possible!');
                    },
                    function (params) {
                        console.log('error with params:');
                        console.log(params);
                        alert(params.message);
                    });
        }

        function testNotExistentHandlerWithoutSuccessHandler() {
            Ponto.invoke(
                    "NotExistClass",
                    "NotExistMethod",
                    null,
                    null,
                    function (params) {
                        console.log('error with params:');
                        console.log(params);
                        alert(params.message);
                         });
        }
    
    function testMethod(){
    
        document.getElementById("QRCode").value='112233';
    }
    
        function scanQRCode() {
            Ponto.invoke(
                     "Messaging",
                     "scanQRCode",
                     {subject: "scanQRCode"},
                     function (params) {
                     console.log('success with params:');
                     console.log(params);
                     document.getElementById("QRCode").value=params;
<!--                     alert('success' + params);-->
                     },
                     function (params) {
                     console.log('error with params:');
                     console.log(params);
                     alert('error');
                     });
        }
    </script>
</head>
<body>
    <h1>Ponto DEMO HTML</h1>
    <ul>
        <li>
            <button onclick="sendMessage()">Display send email popup.</button>
        </li>

        <li>
            <button onclick="getSomeDataFromHandler()">Get some data from handler.</button>
        </li>

        <li>
            <button onclick="testNotExistentMethodInHandler()">Test non existent method.</button>
        </li>

        <li>
            <button onclick="testNotExistentHandler()">Test not existent handler.</button>
        </li>
        
        <li>
            <button onclick="testNotExistentHandlerWithoutSuccessHandler()">Test not existent handler 2.</button>
        </li>
        
        <li>
            <button onclick="scanQRCode()">Scan QR Code.</button><br>
            <input type="text" id="QRCode" size="30" maxlength="20" value="">
        </li>
    </ul>
</body>
</html>